<template>
  <div class="home">
<div class="bannder">
  <img src="http://www.tomson-riviera.com/repository/image/6c4ab76f-a438-46fe-b754-5d77717d2d02.jpg" alt="">
  <div class="txt">汤臣一品</div>
</div>
<div class="content">
  <div class="content-left">
    <div>
      <div class="title">
      汤臣一品
    </div>
    <div class="title-bottom">
      精雕细琢，呈现世界级品质
    </div>
    <div class="txt">
      汤臣一品位于上海浦东陆家嘴金融区滨江大道旁，由两栋40层和两栋44层的豪华公寓和一座高级江景会所构成，面积在434～1206平方米，共220套。是按照别墅尺度进行规划设计的高档公寓，其中A幢D幢为一层一户，平层面积约为597平方米，复式面积约为824-986㎡；B幢与C幢为一层两户，单套平层面积约为435平方米，复式面积约为605-1206㎡；目前，A幢及C幢在售，B幢与D幢出租。
    </div>
    <div class="txt">
      作为小陆家嘴核心区的国际大宅，湯臣一品拥有一线江景、正对外滩，拥揽上海地标性的景观建筑；选用世界级的建材设施、配置和周全的安保系统等，代言世界级的梦幻生活范本。
    </div>
    </div>

  </div>
  <div class="content-right">
    <img src="https://img601.yun300.cn/repository/image/7b00ddee-bc3b-4e58-8b5f-12aacb95e847.jpg?tenantId=215997&viewType=1&k=1642041118000" alt="">
  </div>
</div>
<div class="centen">
  <div class="title">
    一品画语
  </div>
  <div class="xian"></div>
</div>
<div class="list">
  <div v-for="(item,index) in list" class="item" :key="index">
  <img :src="item.img" alt="">
  <div class="title">{{ item.name }}</div>
  </div>
</div>
<!-- 不定义方法直接在@click定义语句 -->
<div class="ckgd" @click="$router.push('/about')">查看更多</div>
  </div>
</template>
<script>

export default {
  data(){
    return{
      list:[
        {
          img:'http://www.tomson-riviera.com/repository/image/f8cf1c18-fced-4011-87c1-1a8878b186c8.jpg',
          name:'清明节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/f0e9cc69-872a-43d7-9d44-73c2fd4bd82f.jpg',
          name:'愚人节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/a434b0cd-aaf1-4320-b25e-c363105a6652.jpg',
          name:'春分'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/1f7a3f62-f084-4351-88b1-c5cf93f4bf11.jpg',
          name:'妇女节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/0d60d9a4-fc60-4830-b109-5487f33e36f2.jpg',
          name:'惊蛰'
        }
      ]
    }
  },
}
</script>
<style lang="less" scoped>
.bannder{
  width: 100%;
  position: relative;
  height: 1000px;

  img{
    width: 100%;
    display: block;
    height: 1000px;
    position: absolute;
  }
  .txt{
    position: absolute;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
  }
}
.content{
  display: flex;
  width: 80%;
  margin: 30px auto;
  height: 580px;
  .content-left,.content-right{
    width: 50%;
    height: 100%;
  }
  .content-left{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 50px;
    border-top: 1px solid #c3c3c3;
  }
  .title{
    font-size: 36px;
    color: #595959;
    font-family: 微软雅黑;
  }
  .title-bottom{
    font-family: 微软雅黑;
    font-size: 20px;
    color: #c3c3c3;
    margin-bottom: 50px;
  }
  .txt{
    font-family: 'Microsoft JhengHei';
    font-size: 18px;
    color: #595959;
    text-indent: 2rem;
    line-height: 40px;
    margin-bottom: 20px;
  }
  .content-right img{
    height: 100%;
    width: 100%;
  }
}
.centen{
  margin-top: 100px;
  .title{
    font-size: 50px;
  }
  .xian{
    width: 100px;
    height: 1px;
    background: #595959;
  margin: 20px auto;
  }
}
.list{
  display: flex;
  width: 80%;
  justify-content: space-between;
  margin: 50px auto;
  .item{
    width: 300px;
    height: 480px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    .title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      background: #c5a544;
    }
  }
}
.ckgd{
  width: 200px;
  line-height: 40px;
  height: 40px;
  border: 1px solid #c3c3c3;
  margin: 30px auto;
}
.ckgd:hover{
  color: #fff;
  background: #c5a544;
  border: 1px solid #fff;
  cursor: pointer;

}
</style>